import React, { createContext, useReducer } from 'react';
import produce from 'immer';

// context
export const CategoryAlphaContext = createContext({});
// constants
export const CHANGE_CATEGORY = 'singers/CHANGE_CATEGORY';
export const CHANGE_ALPHA = 'singers/CHANGE_ALPHA';

// reducer
const reducer = produce((draft, action) => {
  switch (action.type) {
    case CHANGE_CATEGORY:
      draft.category = action.category;
      break;
    case CHANGE_ALPHA:
      draft.alpha = action.alpha;
      break;
    default:
      break;
  }
});
// provider
export const CategoryAlphaProvider = (props) => {
  // useReducer 的第二个参数中传入初始值
  const [data, dataDispatch] = useReducer(reducer, {
    category: null,
    alpha: null,
  });
  return (
    <CategoryAlphaContext.Provider value={{ data, dataDispatch }}>
      {props.children}
    </CategoryAlphaContext.Provider>
  );
};
